<template>
    <div class="player">
        <div v-if=" !pageShow">
            <div class="background-logo">
                <img class="loading-img" :src="staticImageUrl('images/loading.gif')" alt="">
                <img class="background-img" v-if="neplayer && neplayer.poster" :src="neplayer.poster" alt="">
            </div>
        </div>
        <div class="no-ancher displayFlex flexCenter" v-else-if="playEnd && playChannel.playState == 0">
            <div class="text-center no-neplayer width-full">
                直播已结束
            </div>
        </div>
        <div class="no-ancher displayFlex flexCenter" v-else-if="playChannel.playState != 1">
            <div class="text-center no-neplayer width-full">
                主播马上就来啦～
                <div class="text-center padding39px">
                    <span class="refresh-btn" @click="freshWindow">刷新</span>
                </div>
            </div>
        </div>
        <div v-else-if="isShow">
            <div class="background-logo" v-if="neplayer && neplayer.poster && posterShow" >
                <img class="loading-img" :src="staticImageUrl('images/loading.gif')" alt="">
                <img class="background-img" v-if="neplayer && neplayer.poster" :src="neplayer.poster" alt="">
            </div>
            <iframe id="playDerictIframe" ref="playDerictIframe" name="playDerictIframe" class="derict-iframe-style" :src="iframeUrl" @load="iframeLoad()"></iframe>
            <div class="float-content">
                <div class="positionR">
                    <transition enter-active-class="animated slideInLeft"
                                leave-active-class="animated slideOutRight">
                        <div class="enter-name-wrap" v-if="enterPersonMsg && enterPersonMsg.userName">
                            <p class="enter-play displayILB">
                                <span class="enter-play-name">{{enterPersonMsg.userName}}</span> 来捧场了
                            </p>
                        </div>
                    </transition>
                    <div class="user-text user-touch" ref="msgContents">
                        <div class="warning-text" v-if="neplayer.notice">{{neplayer.notice}}</div>
                        <div class="chat-msg" v-if="value.name" v-for="(value,index) in getMsgList">
                            <span class="enter-play">
                                <span class="enter-play-name">{{value.name}}：</span>
                                <span class="enter-play-text" v-html="value.text"></span>
                            </span>
                        </div>
                    </div>
                    <div class="input-wrap-box" v-if="!chatRoomMsg.mute">
                        <div class="input-wrap" @click="inputGetBlur" v-if="!(currentUser && currentUser.userId)">
                            <span class="speak-somthing">说点什么呢...</span>
                        </div>
                        <div v-else class="send-wrap displayFlex" :class="{'input-options': inputShow}">
                            <div class="send-wrap-border" v-if="inputShow" @click.self="inputShow = false"></div>
                            <div class="flex1 positionR displayFlex flex-algin-center speak-winput">
                                <div contenteditable=true
                                     class="speak-input"
                                     id="speakSomthing"
                                     ref="chatInput"
                                     @blur="inputBlur"
                                     @focus="inputFocus"
                                     type="text"
                                     placeholder="说点什么呢..."
                                     rows=1
                                     cols=40>
                                </div>
                            </div>
                            <span class="sendMsg" v-show="inputShow" @click.self="sendMsg">发送</span>
                        </div>
                    </div>
                    <div v-else>
                        <div class="input-wrap mute" v-show="!inputShow">
                            <span class="speak-somthing">您已被禁言</span>
                        </div>
                    </div>
                </div>
            </div>

            <!--用户-->
            <div class="neplayer-user-wrap displayFlex">
                <div class="neplayer-user-content user-touch" v-if="chatRoomMenbersMsg && Array.isArray(chatRoomMenbersMsg.members) && chatRoomMenbersMsg.members.length > 0">
                    <span class="user-header-item" v-for="value in chatRoomMenbersMsg.members" v-if="value.online && !value.account.includes('pg_os_') && !value.type.includes('owner')">
                        <img class="user-header" :src="value.avatar" v-if="value.avatar" alt="">
                        <img v-else class="user-header" :src="staticImageUrl('images/look/default_userheader.png')" alt="">
                    </span>
                </div>
                <!--TODO 为了暂时不出bug-->
                <span class="user-header-item user-header-text">
                    <span class="user-header">{{chatRoomMsg && chatRoomMsg.onlineMemberNum >= 1 ? chatRoomMsg.onlineMemberNum - 1 : 0}}人</span>
                </span>
<!--                <span class="user-header-item user-header-text" v-else>-->
<!--                    <span class="user-header" v-if="chatRoomMenbersMsg && Object.keys(chatRoomMenbersMsg).includes('members')">{{chatRoomMenbersMsg.members.length || 0}}人</span>-->
<!--                </span>-->
            </div>
            <user-handle-icons
                    ref="shareCollectSpeak"
                    v-if="rtCommont && Object.keys(rtCommont).length && !inputShow"
                    :rtCommontProps="rtCommont"
                    :commentListProps="{userHendleType:'module5'}"
                    :discountList="discountList"
                    @isLike="isLike"
                    @showShare="shareShow"
            >
            </user-handle-icons>
            <img class="video-play-btn-img neplay-warp-btn" v-if="isPause && isPlayEd" @click="videoPlay" src="https://r.yibaotong.top/html/v_nw_h5_min/images/video_play_btn.png" alt="">
        </div>
        <wx-share-body @wxShareCb="wxShareCb"></wx-share-body>
    </div>
</template>

<script>
    // import Vue from 'vue';
    // if(Vue.prototype.isIphone){
    //     window.videoLoaded = false;
    //     document.addEventListener('WeixinJSBridgeReady', function(){
    //         let timer = setInterval(()=>{
    //             if(window.videoLoaded){
    //                 if(document.getElementById('playDerictIframe')){
    //                     document.getElementById('playDerictIframe').contentWindow.postMessage('play', '*');
    //                 }
    //             }
    //         },100)
    //     })
    // }
    // import StorePanorama from "./StorePanorama";
    // import StoreGoods from "./StoreGoods";
    // import FullImgVideoSwiper from "../../components/commonActModel/panoramaVideoSwiper/FullImgVideoSwiper";
    import {mapMutations,mapActions,mapState,mapGetters} from 'vuex';
    import store from "../../store";
    export default {
        name: "PlayDirect",
        props:{
            neplayerProp:Object,
            neplayerMsgProp:Object,
            discountList:Array,
            storeMsg:Object
        },
        data(){
            return{
                iframeUrl:'http://test.uni.haokanhaowan.cn/neplayer',
                // iframeUrl:'https://media.haokanhaowan.cn/nePlayer',
                isShow:false,
                isPause:true,
                isPlayEd:false,
                pageShow:false,
                playEnd:false,//直播是否结束
                rtCommont:{},
                inputShow:false,
                textArea:'',//聊天的内容
                getMsgList:[],
                speakInput:'',
                posterShow:true,
                storeId:this.$route.query && this.$route.query.storeId ? this.$route.query.storeId : 0,
                menuType:this.$route.query && this.$route.query.menuType ? this.$route.query.menuType : 1,
                menuId:this.$route.query.menuId,
                isSendMsg:false,
                enterPlayDirect:false,
                chatRoomMsg:{
                    // announcement: "",
                    // broadcastUrl: "http://flv606e3500.live.126.net/live/abe40d4ba0844927a215301b2bb0fb31.flv?netease=flv606e3500.live.126.net",
                    // createTime: 1586400211781,
                    // creator: "pg_manager_592",//账号
                    // custom: "",
                    // id: "169087428",
                    // mute: false,//禁言
                    // name: "木木木欧诺",//当前名字
                    // onlineMemberNum: 2,//在线人数
                    // queuelevel: "0",
                },
                chatRoomMenbersMsg:{
                    // guest: false,//游客
                    // limit: 100,//成员最大值
                    // members: [{
                    //     // account: "pg_manager_592",
                    //     // avatar: "https://oss.pg.yibaotong.top/images/user/202041_offline/887cc860b66444ed932882ec8317fd7a.",//头像
                    //     // blacked: false,
                    //     // chatroomId: "169087428",
                    //     // custom: "",
                    //     // enterTime: 1586834104276,
                    //     // gaged: false,//是否被禁言
                    //     // nick: "子树",
                    //     // online: true,
                    //     // tempMuteDuration: 0,
                    //     // tempMuted: false,
                    //     // type: "owner",
                    //     // updateTime: 1586400211783,
                    //     // valid: true,
                    // }],
                    // time: 0,
                    // type: 0,
                }
                // neplayer:{
                //
                // },
                // neplayerMsg:{
                //
                // }
            }
        },
        mounted(){
            let tempApiObj = {
                storeId: this.storeId || 0,
                userId: this.userId || 0,
                menuId: this.menuId ,
                menuType: this.menuType ,
                successFn,
            }
            this.playChannelApi(tempApiObj);
            this.enterPlayDirect = false;
            let tempObj ={
                enterVisibilityFn:this.refreshPlayChannel
            }
            setTimeout(()=>{
                this.pageShow = true;
            },500);
            setTimeout(()=>{
                this.posterShow = false;
            },2000)
            this.visibilityChange(tempObj);
            let that = this;
            async function successFn(){
                that.neplayer = Object.assign({},that.neplayer,that.playChannel);
                that.neplayerMsg = Object.assign({},that.neplayerMsg,that.neplayerMsgProp);
                console.log('that.neplayer',that.neplayer)
                console.log('that.neplayerMsg',that.neplayerMsg)
                await that.$store.commit("getmediaId", that.neplayer.directPlayId);
                that.init(that.neplayer);
                if( that.neplayer && Object.keys( that.neplayer ).length > 0 ){
                    /*兼容safri浏览器，暂时注释*/
                    // that.iframeUrl += '?notIframe=notIframe&data='+encodeURIComponent(JSON.stringify(that.neplayer));
                    this.iframeUrl += '?notIframe=notIframe'
                    that.isShow = true;
                }else{
                    that.isShow = false;
                }
            }
            // $("#speakSomthing").on('focus', function () {
            //     let i = 0;
            //     let timer = setInterval(function () {
            //         if(i<=10){
            //             document.body.scrollTop = document.body.scrollHeight;
            //             i++
            //         }else{
            //             clearInterval(timer);
            //         }
            //     },10)
            // })
        },
        beforeDestroy() {
            this.discountRoom();
            let tempObj = {
                userId:this.currentUser && this.currentUser.userId ? this.currentUser.userId : 0,
                chatRoomId:this.chatRoomId,
            }
            this.leaveChatRoom(tempObj);
        },
        computed:{
            /*state.groupChat.enterPersonMsg*/
            ...mapState({
                enterPersonMsg:(state)=>state.logic.groupChat.enterPersonMsg,
                chatRoomId:(state)=>state.api.playChannelMsg.chatRoomId,
                emojiList:(state)=>state.logic.emojiList,
                playChannel: state => state.api.playChannelMsg,
            }),
            ...mapGetters({
                nim:'getterGroupIm',
                currentUser:'currentUserFn'
            })
        },
        methods:{
            ...mapMutations(['createNeplayerRoom','sendGroupMsg','getChatRoomAddress','playChannelApi','leaveChatRoom','discountRoom','shareShow']),
            ...mapActions(['doLikeApi']),
            init(val){
                let that = this;
                // this.isShow = true;
                let rtCommont = val;
                this.rtCommont = {
                    id:this.neplayer.directPlayId,//点赞likeKey
                    mediaType:20,//点赞类型
                    dataInfo:rtCommont.dataInfo,
                    hadLiked:rtCommont.hadLiked,
                    storeId:this.$route.query.storeId,
                    isNeedServer:true,
                    latitude: this.storeMsg && this.storeMsg.latitude || 0,
                    longitude: this.storeMsg && this.storeMsg.longitude || 0,
                }
                window.addEventListener('message',function(e){
                    if(e.data == 'loaded'){
                        that.iframeLoaded = true;
                        that.posterShow = false;
                    }else if(e.data == 'videoPlay'){
                        that.posterShow = true;
                        that.isPause = false;
                        that.isPlayEd = true;
                    }else if(e.data == 'videoPause'){
                        that.isPause = true
                    }else if(e.data == 'nePlayerLoaded'){
                        window.videoLoaded = true;
                    }else if(e.data == 'playStart'){
                        that.posterShow = false;
                    }
                },false);
                let tempObj = {
                    success:this.appendPage,
                    address:this.neplayer.address,//没有登录的时候的地址
                    getChatroomMsg:this.getChatroomMsg,
                    getChatroomMembers:this.getChatroomMembers,
                };
                if(!this.enterPlayDirect){
                    this.enterPlayDirect = true;
                    if( this.currentUser && this.currentUser.userId && (!this.nim || (this.nim && Object.keys(this.nim).length == 0)) ){
                        this.createNeplayerRoom({getChatRoomObj:tempObj});
                    }else{
                        this.getChatRoomAddress(tempObj);
                    }
                }
            },
            appendPage(obj){
                if(this.$refs.chatInput && this.isSendMsg){
                    this.$refs.chatInput.innerHTML = '';
                }
                let that = this;
                let domMsg = {};
                if(Array.isArray(obj) && obj.length > 0){
                    if(obj.length == 1 && obj[0].type == 'custom' && !obj[0].text && obj[0].fromNick == '管理员'){
                        this.refreshPlayChannel();
                    }
                    obj.forEach((value,index)=>{
                        try {
                            value.text = that.faceReplace(value.text)
                        }catch (e) {
                        }
                        domMsg = {
                            name:value.fromNick,
                            text:value.text,
                            type:value.type
                        }
                        if( value.fromNick != '管理员'){
                            that.getMsgList.push(domMsg)
                        }
                    })
                }else if(obj && Object.keys(obj).length > 0){
                    domMsg = {
                        name:obj.fromNick,
                        text:obj.text,
                    }
                    if( obj.fromNick != '管理员'){
                        that.getMsgList.push(domMsg)
                    }
                }
                this.isSendMsg = false;
            },
            refreshPlayChannel(){
                //重新获取视频资源信息
                let tempObj = {
                    userId:this.currentUser.userId,
                    storeId:this.$route.query.storeId,
                }
                this.playChannelApi(tempObj);
            },
            /*获取聊天室信息*/
            getChatroomMsg(obj){
                /*聊天室信息*/
                if(obj && obj.chatroom){
                    this.chatRoomMsg = Object.assign({},this.chatRoomMsg,obj.chatroom);
                }
            },
            videoPlay(){
                document.getElementById('playDerictIframe').contentWindow.postMessage('playerVideo', '*');
                this.isPause = false;
            },
            videoPause(){
                document.getElementById('playDerictIframe').contentWindow.postMessage('pauseVideo', '*');
                this.isPause = true
            },
            /*分享成功*/
            wxShareCb(params){
                let that = this;
                if(this.$refs.shareCollectSpeak && this.$refs.shareCollectSpeak.showShareFn){
                    this.$refs.shareCollectSpeak.showShareFn(false);
                }
                if(!params){
                    console.log(params,'wxParams');
                    return
                }
                this.rtCommont.dataInfo.shareNum += 1;
                this.rtCommont = Object.assign({},this.rtCommont )
            },
            /*获取群成员列表*/
            getChatroomMembers(obj){
                if(obj && obj.members){
                    this.chatRoomMenbersMsg = Object.assign({},this.chatRoomMenbersMsg,obj);
                }
            },
            isLike(obj){
                let tempObj = {
                    menuId:this.$route.query.menuId
                }
                obj = Object.assign({},tempObj,obj);
                if(obj && obj.isLike){
                    this.doLikeApi(obj);
                }else if(obj && !obj.isLike){
                    this.doLikeApi(obj);
                }
            },
            inputFocus(){
                this.inputShow = true;
                // this.inputFocus = true;
            },
            inputBlur(){
                // this.inputFocus = false;
                setTimeout(()=>{
                    this.inputShow = false;
                    this.iosBlur();
                },50)
            },
            inputGetBlur(){
                if(!(this.currentUser && this.currentUser.userId)){
                    this.$router.push('/to/login');
                }
                this.inputShow = true;
            },
            iframeLoad(){
                let nextMessge = JSON.stringify(this.neplayer);
                document.getElementById('playDerictIframe').contentWindow.postMessage(nextMessge, '*');
            },
            neplayerPlay(){
                document.getElementById('playDerictIframe').contentWindow.postMessage('play', '*');
            },
            neplayerPause(){
                document.getElementById('playDerictIframe').contentWindow.postMessage('pause', '*');
            },
            sendMsg(){
                this.isSendMsg = true;
                let speakSomthing = this.$refs.chatInput.innerHTML;
                this.inputShow = false;
                if(speakSomthing == ''){
                    this.$root.$emit('toast',{msg:'请输入内容'});
                }
                let obj = {
                    text:speakSomthing,
                    success:this.appendPage
                }
                this.sendGroupMsg(obj)
            },
            /*刷新页面*/
            freshWindow(){
                this.$router.go(0)
            },
            /*退到后台之后2分钟后重新刷新页面,先不处理*/
            isFreshPage(){
            },
            /*表情替换*/
            faceReplace(msg){
                let that = this;
                let tempMsgString = msg
                if( /\[.*?\]/.test(msg) ){
                    let msgMatch = msg.match(/\[.*?\]/g);
                    msgMatch.forEach((msgMatchValue,index)=>{
                        for( let value in that.emojiList.emoji){
                            if( msgMatchValue == value ){
                                var reg = new RegExp(value.slice(1,-1));
                                msg = msg.replace(reg,`<img class="face-icon" style="width: .25rem;height: .25rem;"  src="${this.imgPath}images/emoji/emoji/${that.emojiList.emoji[value].file}" />`);
                                msg = msg.replace(/\[|\]/ig,'')
                            }
                        }
                    })
                }
                return msg
            },
        },
        components:{
            'user-handle-icons':()=>import('../../components/commonActModel/userHandleIcons/UserHandleIcons'),
            'wx-share-body': () => import('../../components/wx/WxShareBody'),
        },
        watch:{
            playChannel(val){
                if(val && val.playState == 0){
                    this.playEnd = true
                }
                this.neplayer = Object.assign({},this.neplayer,val);
                this.init(this.neplayer);
            },
            getMsgList(val){
                if(this.$refs.msgContents){
                    setTimeout(()=>{
                        let dom = this.$refs.msgContents;
                        this.scrollBottom(dom);
                    },150);
                }
            },
            inputShow(val){
                /*兼容ios下输入框被遮挡的问题*/
                if(val && this.isIphone){
                    let height = document.body.scrollHeight
                    setTimeout(()=>{
                        let i = 0;
                        let timer = setInterval(function () {
                            if(i<=10){
                                document.body.scrollTop = height;
                                i++
                            }else{
                                clearInterval(timer);
                            }
                        },10)
                    },80)
                }
            },
            storeMsg(val){
                if(val && (val.latitude || val.longitude) ){
                    let tempObj = {
                        "latitude": this.storeMsg.latitude,
                        "longitude": this.storeMsg.longitude,
                    }
                    this.rtCommont = Object.assign({},this.rtCommont,tempObj);
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .player /deep/ {
        .slide-wrap{
            z-index:1;
        }
    }
    .derict-iframe-style,.player{
        width: 100%;
        width: 100vw;
        height: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .warning-text{
        color: #FFD940;
        font-size: .16rem;
        background-color: rgba(0,0,0,.3);
        border-radius: .08rem;
        line-height: .24rem;
        letter-spacing: .02rem;
        padding: .1rem;
        margin-top: .4rem;
        margin-bottom: .08rem;
    }
    .float-content{
        position: absolute;
        left: .2rem;
        bottom: .24rem;
        width: 2.6rem;
    }
    .input-wrap{
        margin-top: .2rem;
        background-color: rgba(0,0,0,.3);
        border-radius: .25rem;
        padding: .1rem;
        height: .44rem;
        box-sizing: border-box;
        width: 1.6rem;
    }
    .mute.input-wrap{
        .speak-somthing{
            color: rgba(255,255,255,.6);
        }
    }

    .input-wrap-box{
        height: .44rem;
    }
    .speak-somthing{
        background-color: transparent;
        border: none;
        outline: none;
        height: 100%;
        width: 100%;
        color: #fff;
    }
    .speak-somthing::-webkit-input-placeholder,.speak-somthing::placeholder{
        color: #C4C6CC;
        font-size: .16rem;
    }
    .send-wrap{
        margin-top: .2rem;
        color: rgba(255,255,255,.6);
        background-color: rgba(0,0,0,0.3);
        border-radius: .25rem;
        padding: .1rem;
        height: .44rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 1.6rem;
        .speak-somthing{
            color: #313233;
        }
        .placeholder{
            color: rgba(255,255,255,.6);
        }
        .speak-input{
            color: rgba(255,255,255,.6);
            padding: .05rem 0;
            max-height: .5rem;
            overflow: auto;
            width: 100%;
        }
        .speak-input:empty:before{
            content:attr(placeholder);
            font-size: .16rem;
            color: #fff;
        }
        .speak-input:focus:before {
            content: none;
        }
            .speak-winput{
            width: 90%;
        }
        .sendMsg{
            line-height: .5rem;
            position: relative;
            z-index: 1;
        }
        .send-wrap-border{
            height: 6.67rem;
            height: 100vh;
            width: 3.75rem;
            width: 100vw;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .placeholder{
            color: #fff;
        }
    }
    .input-options{
        width: 100%;
        width: 100vw;
        height: .5rem;
        background-color: #fff;
        font-size: .16rem;
        position: absolute;
        bottom: -.25rem;
        padding: 0 .16rem;
        box-sizing: border-box;
        border-radius: 0;
        left: -.2rem;
        .speak-input{
            color: #313233;
        }
    }
    .sendMsg{
        color: #313233;
    }
    .chat-msg{
        .enter-play{
            display: inline-block;
        }
    }
    .enter-play{
        padding: .05rem .08rem;
        text-align: center;
        color: #fff;
        margin-bottom: .08rem;
        font-size: .16rem;
        border-radius: .25rem;
        line-height: .21rem;
        background-color: rgba(0,0,0,.3);
    }
    .enter-play-name{
        color: #8CFFFF;
        white-space: nowrap;
    }
    .enter-play-text{
        text-align: left;
    }
    .enter-name-wrap{
        width: 3.4rem;
        width: 90vw;
    }
    .user-text{
        height: 2.2rem;
        overflow: auto;
        /*background-image: linear-gradient(to bottom,rgba(255,255,255,0)0%,rgba(255,255,255,.3)5%,rgba(255,255,255,0)10%,rgba(255,255,255,.3)90%,rgba(255,255,255,0)95%,rgba(255,255,255,.3)100%);*/
    }
    .video-play-btn-img{
        position: absolute;
        top: 30%;
        width: 50px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 0;
    }
    .animated.slideOutRight,.animated.slideInLeft{
        -webkit-animation-duration: 300ms;
    }
    .user-header{
        width: 100%;
        height: 100%;
        border-radius: .25rem;
        object-fit: cover;
    }
    .neplayer-user-wrap{
        position: absolute;
        overflow: hidden;
        right: 0;
        top: 1.1rem;
        z-index: 1000;
        max-width: 2rem;
        height: .38rem;
        .neplayer-user-content{
            overflow: auto;
            white-space: nowrap;
            height: .6rem;
        }
    }
    .user-header-item{
        width: .5rem;
        height: .38rem;
        display: inline-block;
        border-radius: .25rem;
        padding: 0 .06rem;
        color: #fff;
        font-size: .12rem;
    }
    .user-header-text{
        display: inline-block;
        line-height: .38rem;
        text-align: center;
        .user-header{
            display: inline-block;
            width: .38rem;
            height: .38rem;
            background-color: rgba(0,0,0,.7);
        }
    }
    .no-ancher{
        width: 100%;
        height: 100%;
        background-color: #1F2533;
        .refresh-btn{
            display: inline-block;
            background-color: #5D89E8;
            font-size: .14rem;
            width: .8rem;
            height: .32rem;
            line-height: .32rem;
            color: #fff;
            text-align: center;
            border-radius: .25rem;
        }
        .no-neplayer{
            color: #939599;
            font-size: .14rem;
        }
    }
    .speak-line{
        height: 3px;
        background-color: #333;
        animation: 2s infinite speakLine ;
    }
    .neplay-warp-btn{
        z-index: 1070;
    }
    @keyframes speakLine {
        /*0%{*/
        /*    opacity: ;*/
        /*}*/
    }
    .background-logo{
        .background-img{
            width: 100%;
            width: 100vw;
            height: 100%;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            object-fit: cover;
            z-index: 10;
        }
        .loading-img{
            position: fixed;
            width: 100px;
            height: 100px;
            left: 0;
            right: 0;
            top:0;
            bottom:0;
            margin: auto;
            z-index:1;
        }
    }

</style>